<template>
  <div id="center">
    <!-- 面包屑 -->
    <div class="center-crumbs">
      <a href="#">首页</a>

      <span><span class="icon">&nbsp; > &nbsp;</span>服饰鞋包</span>
    </div>

    <!-- 内容 -->
    <div class="center-content">
      <div class="center-navigation">
        <!-- 分类 -->
        <div class="center-typeAll">
          <span>分类：</span>
          <div>
            <a href="#">全部</a>
            <a href="#" v-for="typeItem in getTypeData" :key="typeItem.id">
              {{ typeItem.typeName }}
            </a>
          </div>
        </div>

        <!-- 配送地区 -->
        <div class="center-address">
          <span>配送地区：</span>
          <div>
            <a href="#">全部</a>
            <a href="#" v-for="addItem in getAddressData" :key="addItem.id">
              {{ addItem.address }}
            </a>
          </div>
        </div>

        <!-- 排序 -->
        <div class="center-sort">
          <span>排序：</span>
          <div>
            <a href="#">默认</a>
            <a href="#">价格</a>
            <a href="#">上架时间</a>
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="center-list" v-for="item in getListData" :key="item.id">
        <div class="center-list-title">
          <h1>{{ item.listTitle }}</h1>
          <p>{{ item.listContent }}</p>
        </div>
        <div class="center-details">
          <div
            v-for="listItem in item.listData"
            :key="listItem.id"
            @mouseenter="enterHandler(listItem)"
            @mouseleave="leaveHandler(listItem)"
          >
            <img
              :src="listItem.isShow ? listItem.imgHover : listItem.imgShow"
              :title="listItem.title"
            />
            <h3>
              <a href="#">{{ listItem.title }}</a>
            </h3>
            <span class="money">￥{{ listItem.price }}</span>
            <hr />
            <p>{{ listItem.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <IndexSideBar></IndexSideBar>
  </div>
</template>

<script>
import IndexSideBar from "@/components/IndexSideBar.vue"
import { reqGetListData } from "@/api"
export default {
  name: "List",
  components: {
    IndexSideBar,
  },
  data() {
    return {
      getTypeData: [], // 分类
      getAddressData: [], // 配送地区
      getListData: [], // 商品列表
      listImg: "", // 商品图片
    }
  },

  created() {
    this.getTableData()
  },
  methods: {
    enterHandler(list) {
      this.$set(list, "isShow", true)
    },
    leaveHandler(list) {
      this.$set(list, "isShow", false)
    },
    async getTableData() {
      const result = await reqGetListData()
      if (result.code === 200) {
        // 分类
        this.getTypeData = result.data.typeData
        // 配送地区
        this.getAddressData = result.data.addressData
        // 商品列表
        this.getListData = result.data.list
        return
      }
      console.log(result)
    },
  },
}
</script>

<style lang="less" scoped>
#center {
  position: relative;
  background-color: #f5f5f5;
  a:hover {
    color: #b4a078 !important;
    text-decoration: none;
  }
  /* 面包屑 */
  .center-crumbs {
    margin: 0 auto;
    padding: 20px 0;
    width: 1090px;
    font-size: 12px;
  }

  // 内容
  .center-content {
    margin: 0 auto;
    padding: 0 40px;
    background: #ffffff;
    width: 1090px;
    box-sizing: border-box;

    // 导航
    .center-navigation {
      // 分类
      .center-typeAll {
        padding-top: 20px;
        border-bottom: 1px dashed #ccc;
        span {
          margin-right: 28px;
          font-size: 14px;
          vertical-align: top;
        }
        div {
          display: inline-block;
          width: 930px;
          a {
            display: inline-block;
            font-size: 14px;
            margin: 0 30px 16px 0;
          }
        }
      }

      // 配送地区
      .center-address {
        padding-top: 20px;
        border-bottom: 1px dashed #ccc;
        span {
          font-size: 14px;
          vertical-align: top;
        }
        div {
          display: inline-block;
          width: 930px;
          a {
            display: inline-block;
            font-size: 14px;
            margin: 0 30px 16px 0;
          }
        }
      }
      // 排序
      .center-sort {
        padding-top: 20px;
        border-bottom: 1px dashed #ccc;
        span {
          margin-right: 28px;
          font-size: 14px;
          vertical-align: top;
        }
        div {
          display: inline-block;
          width: 930px;
          a {
            display: inline-block;
            font-size: 14px;
            margin: 0 30px 16px 0;
          }
        }
      }
    }
    // 商品列表
    .center-list {
      .center-list-title {
        text-align: center;
        margin: 30px 0 40px 0;
        h1 {
          font-size: 24px;
          margin-bottom: 19px;
        }
        p {
          font-size: 14px;
        }
      }
      .center-details {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        // 单品模块
        > div {
          display: inline-block;

          height: 401px;
          width: 245px;
          margin-bottom: 50px;
          text-align: center;
          a {
            color: #333333;
          }
          &:hover {
            background-color: #f4f0ea;
          }
          // 图片
          img {
            height: 245px;
            width: 245px;
            cursor: pointer;
          }
          h3 {
            width: 156px;
            font-size: 13px;
            color: #333333;
            margin: 32px auto 0 auto;
            line-height: 20px;
          }
          .money {
            display: inline-block;
            border-bottom: 1px solid #e8e8e8;
            padding: 8px 0;
            width: 127px;
            color: #d4282d;
            span {
              font-size: 12px;
              color: #999999;
              text-decoration: line-through;
            }
          }
          p {
            margin-top: 14px;
            color: #999999;
          }
        }

        // 列表图片
        // #region
        // div:nth-child(1) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/57654f86b67886b6cca024b5deef12d3.png?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(2) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/2cd9984c1ae994cc2d787dae940f7e6f.png?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(3) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/67dd4d30dc66737353204603115d00d3.jpg?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(4) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/3e98ecc0c8bb07fc0f59beef22138892.png?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(5) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/d10344917b1ddb10ed86edbc81c46fb3.png?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(6) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/759b08e0de2e62ef74cda4fc7de1d999.png?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(7) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/6d9fc19a30823be6238b3dc9ef724244.jpg?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // div:nth-child(8) div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/0d5d2bae6842b0bdbf8806f6bb624cd8.png?type=webp&imageView&quality=95&thumbnail=245x245);
        // }
        // #endregion
        // 列表hover
        // #region
        // div:nth-child(1):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/610ca88de6e5e4e8e2b98a3a88caabb9.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(2):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/7d15401c0b37dea5016501d0ee1e6fba.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(3):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/c5575d222b969abe58691414fe588e5b.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(4):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/610ca88de6e5e4e8e2b98a3a88caabb9.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(5):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/610ca88de6e5e4e8e2b98a3a88caabb9.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(6):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/610ca88de6e5e4e8e2b98a3a88caabb9.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(7):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/610ca88de6e5e4e8e2b98a3a88caabb9.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // div:nth-child(8):hover div {
        //   background-image: url(https://yanxuan-item.nosdn.127.net/610ca88de6e5e4e8e2b98a3a88caabb9.png?type=webp&quality=95&thumbnail=245x245&imageView);
        // }
        // #endregion
      }
    }
  }
}
</style>
